<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>自助借书</title>
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=10; IE=11; IE=EDGE">
    <script type="text/javascript">
        var FINAL_COUNT = ${fns:getDictValue('borrow','selfCountDown' ,'20')}
    </script>
    <%@ include file="/WEB-INF/views/include/common.jsp" %>
    <%@ include file="/WEB-INF/views/include/countDown.jsp" %>
    <script src="${ctxStatic}/lodop/LodopFuncs.js" type="text/javascript"></script>
</head>
<body>
<audio src="${ctxStatic}/audio/borrow.mp3" id="audio1" hidden="true" autoplay="true"></audio>

<div class="page-header">
    <div class="row">
        <div class="col-md-offset-1 col-md-9">
            <h1>智能图书馆借还系统</h1>
        </div>
    </div>
</div>

<div class="row">
    <div class="main col-md-9">
        <div class="col-md-offset-2 col-md-8">
            <ul class="list-group" style="margin-top: 10%;">
                <li class="list-group-item active" style="height: 50px;"></li>
                <li class="list-group-item">
                    <div id="jumbotron" class="jumbotron">
                        <h1 style="text-align: center">请在条码识别区扫描你要借的图书</h1>
                        <h2 style="text-align: center">请按照语音提示操作</h2>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-md-3">
        <div class="col-md-10">
            <%@ include file="/WEB-INF/views/include/userInfo.jsp" %>
        </div>
        <div class="col-md-10">
            <%@ include file="/WEB-INF/views/include/borrowed.jsp" %>
        </div>
    </div>
</div>

<div id="borrow_content" class="container" style="display: none;">
    <div class="col-md-12">
        <div id="borrows_div">
            <table id="borrows_tab" class="table table-bordered">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>书名</th>
                    <th>ISBN</th>
                    <th>还书日期</th>
                    <th>结果</th>
                </tr>
                </thead>
                <tbody id="userBorrowBooks">
                </tbody>
            </table>
        </div>
        <button type="button" class="btn btn-primary" onclick="printBorrow();">打印凭条</button>
    </div>
</div>

<script type="text/javascript">
    var isSubbmit = false;
    var index = 1;

    $(function(){
        document.onkeydown = function (e) {
            var nextCode = '';
            var code = this.code;

            if (window.event) {
                nextCode = e.key
            } else if (e.key) {
                nextCode = e.key
            }

            if (nextCode != 'Enter') {
                if (code == undefined) {
                    code = '';
                }
                code += nextCode
            }

            this.code = code;
            // 键入Enter
            if (e.code == 'Enter') {
                // 判断 code 长度
                if (code != undefined && code != '') {
                    code = code.trim();
                    submitBrrowForm(code);
                }
                // 键入回车务必清空code值
                this.code = '';
                return false;
            }
        };
    });

    function submitBrrowForm(isbn){
        $("#borrow_content").show();
        $("#jumbotron").html($("#borrow_content"));

        // 防止重複提交
        if(!isSubbmit && '' != isbn){
            isSubbmit = true;
            $.ajax({
                type: "POST",
                url: "${cts}/borrow_book.do",
                dataType: "json",
                data: {banid: isbn},
                success: function (result) {
                    if (result != null && result != "") {
                        var code = result.code;
                        var msg = result.msg;
                        if (code == '0001') {
                            var borrow = result.data;
                            var needRtnDate = formatDate(borrow.needRtnDate);

                            var html = "<tr class='item' style='height: 30px;font-size: 16px;'>"
                                    + "        <td class='item2 display'>" + index + "</td>"
                                    + "        <td class='item2'>" + borrow.bkBookinfo.bookname + "</td>"
                                    + "        <td class='item2'>" + borrow.bkBookinfo.isbn + "</td>"
                                    + "        <td class='item2'>" + needRtnDate + "</td>"
                                    + "        <td class='item2'>" + msg + "</td>"
                                    + "</tr>";

                            // 修改用户下面的借阅列表
                            $("#no_borrow_tbody").remove();
                            var borrowhtml = "<tr id='borrow_info_" + borrow.zlId + "'><td>" + borrow.bkBookinfo.bookname + "</td><td>" + needRtnDate + "</td></tr>";
                            $("#borrow_info_tbody").append(borrowhtml);

                            index++;
                        } else {
                            layer.msg(msg);
                        }
                    }
                    console.log(html);
                    $("#userBorrowBooks").append(html);

                    $("#banid").val("").focus();
                }
            });
            isSubbmit = false;
        }
    }
</script>

<object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0>
    <param name="Border" value="1">
    <param name="Color" value="white">
    <embed id="LODOP_EM" TYPE="application/x-print-lodop" width=0 height=0 border=0 Color="white"
           PLUGINSPAGE="install_lodop.exe">
</object>
<script type="text/javascript">
    var isPrinted = false;
    var LODOP;

    function printBorrow() {
        if (!isPrinted) {
            LODOP = getLodop(document.getElementById('LODOP'), document.getElementById('LODOP_EM'));
            LODOP.PRINT_INIT("打印凭条");

            LODOP.SET_PRINT_STYLEA(1, "FontSize", 14);
            LODOP.ADD_PRINT_TEXT(0, 60, 140, 30, "图书借阅凭条");

            LODOP.SET_PRINT_STYLEA(2, "FontSize", 11);
            var width = 130;
            var now_date = "${now_date}";
            LODOP.ADD_PRINT_TEXT(30, 0, width, 22, "姓名：${reader.rdName}");
            LODOP.ADD_PRINT_TEXT(30, width, width + 10, 22, "姓别：${reader.rdSex == '1'?'男':'女'}");
            LODOP.ADD_PRINT_TEXT(53, 0, width, 22, "状态：${reader.rdState=='0'?'正常':'挂失'}");
            LODOP.ADD_PRINT_TEXT(53, width, width + 10, 22, "日期：" + now_date);

            var strStyle = "<style>table{width: 100%;}table,td,th {border: 1px solid #000;border-collapse: collapse;font-size: 12px;}td,th {{height: 20px;}.display{display:none;}</style>";
            LODOP.ADD_PRINT_TABLE(90, 3, 270, 150, strStyle + document.getElementById("borrows_div").innerHTML);

            LODOP.SET_PRINT_PAGESIZE(3, 800, 80, "");

            //LODOP.PRINT_DESIGN();
            //LODOP.SHOW_CHART();

            LODOP.PRINT();
            isPrinted = true;
        }
    }
</script>
<%@ include file="/WEB-INF/views/include/footer.jsp" %>
</body>
</html>